<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
	div div{
		border: 1px solid black;
		margin: 5px;
		display: inline-block;
		width: 50px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		cursor: pointer;
	}
	.div2{
		border: 1px solid blue;
		color: blue;
		background-color: pink;
	}
	input{
		width: 100px;
	}
</style>
<body>
	id:<input type="text" name="bookId">
	编号:<input type="text" name="bookNo">
	书名:<input type="text" name="bookName">
	作者:<input type="text" name="bookWriter">
	最小单价:<input type="text" name="minBookPrice">
	最大单价:<input type="text" name="maxBookPrice">
	类型:<input type="text" name="bookType">
	<button onclick="creat()">查询</button>
	<table border="1" style="width: 1000px">
		<thead>
			<tr>
				<th>ID</th>
				<th>编号</th>
				<th>书名</th>
				<th>作者</th>
				<th>单价</th>
				<th>库存</th>
				<th>类型</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		
		</tbody>
	</table>
	<div></div>
</body>
<script src="js/jquery.js"></script>
<script>
	let tbody = $("tbody");
	let div = $("div");
	let deleteBooks = function(bookId,pageNum){
		$.ajax({
			type:"POST",
			url:"deleteBook.do",
			data:{bookId:bookId},
			success:function(data){
				if(data==1){
					alert("删除成功");
				}else{
					alert("删除失败");
				}
				creat(pageNum);
			}
		})
	};
	let creat = function(pageNum){
		let bookId = $("[name='bookId']").val();
		let bookNo = $("[name='bookNo']").val();
		let bookName = $("[name='bookName']").val();
		let bookWriter = $("[name='bookWriter']").val();
		let minBookPrice = $("[name='minBookPrice']").val();
		let maxBookPrice = $("[name='maxBookPrice']").val();
		let bookType = $("[name='bookType']").val();
		$.ajax({
			type:"POST",
			url:"getBook.do",
			data:{
				pageNum:pageNum,
				bookId:bookId,
				bookNo:bookNo,
				bookName:bookName,
				bookWriter:bookWriter,
				minBookPrice:minBookPrice,
				maxBookPrice:maxBookPrice,
				bookType:bookType
				},
			success:function(data){
				let books = data.data;
				tbody.empty();
				div.empty();
				$.each(books,function(index,book){
					let tr = $("<tr>");
					let bookId = $("<td>").text(book.bookId);
					let bookNo = $("<td>").text(book.bookNo);
					let bookName = $("<td>").text(book.bookName);
					let bookWriter = $("<td>").text(book.bookWriter);
					let bookPrice = $("<td>").text(book.bookPrice);
					let bookNum = $("<td>").text(book.bookNum);
					let bookType = $("<td>").text(book.bookType);
					let deleteBook = $("<td>").text("删除").on("click",function(){deleteBooks(book.bookId,data.pageNum)});
					tr.append(bookId).append(bookNo).append(bookName).append(bookWriter).append(bookPrice).append(bookNum).append(bookType).append(deleteBook);
					tbody.append(tr);
				});
				let home = $("<div>").text("首页").on("click",function(){creat(1)});
				div.append(home);
				if(data.hasPrev){
					let prev = $("<div>").text("上一页").on("click",function(){creat(data.pageNum-1)});
					div.append(prev);
				}
				for(let i=1;i<=data.totalPage;i++){
					let num = $("<div>").text(i).on("click",function(){creat(i)});
					if(i==data.pageNum){
						num.addClass("div2");
					}
					div.append(num);
				}
				if(data.hasNext){
					let next = $("<div>").text("下一页").on("click",function(){creat(data.pageNum+1)});
					div.append(next);
				}
				let end = $("<div>").text("尾页").on("click",function(){creat(data.totalPage)});
				div.append(end);
			}
		});
	}
	creat();
</script>
</html>